<template>
  <u-popup
    :show="show"
    mode="center"
    round="12"
    :closeable="true"
    @close="close"
    :safeAreaInsetBottom="false"
  >
    <view class="phone-edit-popup">
      <view class="popup-header">
        <text class="popup-title">修改手机号</text>
      </view>

      <view class="popup-content">
        <!-- 手机号输入框 -->
        <view class="input-item">
          <u-input
            v-model="phone"
            placeholder="请输入新的手机号"
            border="none"
            clearable
            maxlength="11"
            type="number"
          >
          </u-input>
        </view>

        <!-- 验证码输入框 -->
        <view class="input-item">
          <view class="code-input-wrapper">
            <u-input
              v-model="code"
              placeholder="请输入验证码"
              border="none"
              clearable
              maxlength="6"
              type="number"
            >
            </u-input>
            <button
              class="get-code-btn"
              :class="{ disabled: !canGetCode }"
              @click="getCode"
              :disabled="!canGetCode || counting"
            >
              {{ codeBtnText }}
            </button>
          </view>
        </view>
      </view>

      <view class="popup-footer">
        <button class="confirm-btn" @click="confirm">确定</button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "PhoneEdit",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    currentPhone: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      phone: "",
      code: "",
      counting: false,
      countdown: 60,
    };
  },
  computed: {
    canGetCode() {
      return /^1[3-9]\d{9}$/.test(this.phone);
    },
    canConfirm() {
      return this.phone && this.code;
    },
    codeBtnText() {
      if (this.counting) {
        return `${this.countdown}s后重新获取`;
      }
      return "获取验证码";
    },
  },

  mounted() {
    this.phone = this.currentPhone;
    this.code = "";
  },
  methods: {
    // 关闭弹窗
    close() {
      this.$emit("close");
      this.reset();
    },

    // 获取验证码
    async getCode() {
      if (!this.canGetCode || this.counting) return;

      try {
        this.counting = true;
        // 模拟发送验证码
        uni.showLoading({ title: "发送中..." });

        // 这里调用获取验证码的API
        // await this.$api.user.sendSmsCode({ phone: this.phone })

        setTimeout(() => {
          uni.hideLoading();
          uni.showToast({ title: "验证码已发送", icon: "success" });
          this.startCountdown();
        }, 1000);
      } catch (error) {
        this.counting = false;
        uni.showToast({ title: "发送失败", icon: "error" });
      }
    },

    // 开始倒计时
    startCountdown() {
      const timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(timer);
          this.counting = false;
          this.countdown = 60;
        }
      }, 1000);
    },

    // 确认修改
    async confirm() {
      if (!this.canConfirm) return;

      try {
        uni.showLoading({ title: "修改中..." });

        // 这里调用修改手机号的API
        // await this.$api.user.updatePhone({
        //   phone: this.phone,
        //   code: this.code
        // })

        setTimeout(() => {
          uni.hideLoading();
          uni.showToast({ title: "修改成功", icon: "success" });
          this.$emit("success", this.phone);
          this.close();
        }, 1000);
      } catch (error) {
        uni.showToast({ title: "修改失败", icon: "error" });
      }
    },

    // 重置表单
    reset() {
      this.phone = "";
      this.code = "";
      this.counting = false;
      this.countdown = 60;
    },
  },
};
</script>

<style lang="scss" scoped>
.phone-edit-popup {
  width: 686rpx;
  // height: 470rpx;
  background: #ffffff;
  border-radius: 28rpx 28rpx 28rpx 28rpx;
}

.popup-header {
  padding: 28rpx;
  text-align: center;
}

.popup-title {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

.popup-content {
  padding: 28rpx 28rpx 60rpx 28rpx;
}

.input-item {
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #ddd;

  &:last-child {
    margin-bottom: 0;
  }
}

.input-label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.code-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  // background: #f8f9fa;
  // border-radius: 8rpx;
  // padding: 0 20rpx;
}

.get-code-btn {
  background-color: transparent !important;
  color: #0785cf !important;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 28rpx;

  margin: 0;

  &::after {
    border: none;
  }
}

.input-clear {
  font-size: 32rpx;
  color: #ccc;
  padding: 10rpx;
}

.popup-footer {
  padding: 0 30rpx 30rpx;
}

.confirm-btn {
  border: none;

  font-weight: 500;
  line-height: 84rpx;
  font-size: 32rpx;
  color: #ffffff;
  width: 560rpx;
  height: 84rpx;
  background: #0785cf;
  box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(7, 133, 207, 0.16);
  border-radius: 100rpx 100rpx 100rpx 100rpx;

  &:disabled {
    background: #ccc;
    color: #999;
  }

  &::after {
    border: none;
  }
}
</style>
